<template>
    <!--楼层-->
    <div class="floor">
        <div class="py-container">

            <div class="title clearfix">
                <h3 class="fl">手机通讯</h3>
                <div class="fr">

                    <el-tabs v-model="activeTab">
                        <el-tab-pane v-for="(tab, index) in tabs" :key="index" :label="tab" :name="`tab${index + 1}`">
                        </el-tab-pane>
                    </el-tabs>
                    
                </div>
            </div>

            <div class="tab-content">
                <div class=" tab-list">

                    <div class="list-left">
                        <ul class="ul-list">
                            <li v-for="(item, index) in menuList" :key="index">{{ item }}</li>
                        </ul>
                        <img src="./images/1_floor-1-1.png" style="width: 100%;" />
                    </div>

                    <div class="list-center">
                        <el-carousel :interval="2000">
                            <el-carousel-item v-for="item in centerImages" :key="item.id">
                                <img :src="item.src" :alt="item.alt" />
                            </el-carousel-item>
                        </el-carousel>

                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>

                    <div class="split" v-for="(group, index) in imageGroups" :key="index">
                        <div v-for="(image, imgIndex) in group.images" :key="imgIndex" class="split-content">
                            <img :src="image.src" @error="handleImageError(image)" />
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            activeTab: 'tab1', // 默认选中的标签
            menuList: [
                '节能补贴',
                '4K电视',
                '空气净化器',
                'IH电饭煲',
                '滚筒洗衣机',
                '电热水器'
            ],
            tabs: [
                '热门',
                '大家电',
                '生活电器',
                '厨房电器',
                '应季电器',
                '空气/净水',
                '高端电器'
            ],
            imageGroups: [
                {
                    images: [
                        { src: require("./images/1_floor-1-2.png") },
                        { src: require("./images/1_floor-1-3.png") }
                    ]
                },
                {
                    images: [
                        { src: require("./images/1_floor-1-4.png") }
                    ]
                },
                {
                    images: [
                        { src: require("./images/1_floor-1-5.png") },
                        { src: require("./images/1_floor-1-6.png") }
                    ]
                }
            ],
            centerImages: [
                { id: 1, src: require("./images/1_floor-1-b01.png"), alt: "b01" },
                { id: 2, src: require("./images/1_floor-1-b02.png"), alt: "b02" },
                { id: 3, src: require("./images/1_floor-1-b03.png"), alt: "b03" },
            ],
        };
    },
    methods: {

    }
}
</script>

<style scoped>
@import "./floor.css";

</style>